<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>radial-gradient()_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        div {
            width: 200px;
            height: 100px;
            margin-top: 10px;
            border: 1px solid #ddd;
        }
        .test {
            background: radial-gradient(circle at center, #f00, #ff0, #080);
        }
        .test2 {
            background: radial-gradient(circle closest-side, #f00, #ff0, #080);
        }
        .test3 {
            background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
        }
        .test4 {
            background: radial-gradient(at top right, #f00, #ff0, #080);
        }
        .test5 {
            background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
        }
        .test6 {
            background:
                    radial-gradient(farthest-side at top right, #f00, #ff0, #080, transparent),
                    radial-gradient(60px at top left, #f00, #ff0, #080);
        }
        .circle{
            width: 100px;
            height: 100px;
            /*background: #ff4f5a;*/
            background: radial-gradient(circle at 30px  30px, #f8fffd,#ff2c28);

            /*background: repeating-radial-gradient(circle at 30px  30px, #f8fffd,#ff2c28);*/
            /*background: radial-gradient(80% 60%,#fffbf7,#ff2c28);*/
            border-radius: 50%;
            border: none;
        }
        .circle1{
            width: 100px;
            height: 100px;
            /*background: #ff4f5a;*/
            /*background: radial-gradient(circle at 30px  30px, #f8fffd,#ff2c28);*/

            /*background: -webkit-repeating-radial-gradient(60px 60px,#f8fffd,#ff2c28);*/
            background: radial-gradient(60% 60%, #ff001b, #00ff04,#0000ff);
            /*background: radial-gradient(80% 60%,#fffbf7,#ff2c28);*/
            border-radius: 50%;
            border: none;
        }
    </style>
</head>
<body>
<!--<div class="test"></div>-->
<!--<div class="test2"></div>-->
<!--<div class="test3"></div>-->
<!--<div class="test4"></div>-->
<!--<div class="test5"></div>-->
<!--<div class="test6"></div>-->
<div class="circle">
    
</div>
<div class="circle1">

</div>
</body>
</html>